import {
  HashRouter,
  Outlet,
  Route,
  Routes,
  useLocation,
  useNavigate,
  useOutlet,
} from "react-router-dom";
// import DashboardLayout from '../layout/dashboard'
import Student from "../pages/student/UserPage/UserPage";
import SideBar from "../pages/student/SideBar/sideBar";
import Login from "../pages/login";
import UserSetting from "../pages/student/UserSetting/UserSetting";

import Teacher from "../pages/teacher/UserPage/UserPage";
import Introduction from "../pages/login/Introduction/Introduction";
import SideBarTeacher from "../pages/teacher/SideBar/sideBar";
import NoticeTeacher from "../pages/teacher/Notice/Notice";
import TeacherSetting from "../pages/teacher/UserSetting/UserSetting";
import Course from "../pages/teacher/Course/Course";
import Exam from "../pages/teacher/Exam/Exam";
import ExamDetail from "../pages/teacher/Exam/ExamDetail";

import ExamControl from "../pages/administrator/exam/ExamControl";
import SideBarAdmin from "../pages/administrator/SideBar/sideBar";
import CourseApplication from "../pages/administrator/courseApplication/CourseApplication";
import ExamApplication from "../pages/teacher/ExamApplication/ExamApplication";
import {
  CSSTransition,
  SwitchTransition,
  TransitionGroup,
} from "react-transition-group";
import { useContext, useEffect, useState, createContext } from "react";
import { UserContext, UserProContext } from "../App";
// import AnimatedRouter from "react-animated-router";
// import "react-animated-router/animate.css";
import "react-animated-router/animate.css";
import ScorePage from "../pages/student/ScorePage/ScorePage";
import getLocalUser from "../api/getUser";
import SelectCourse from "../pages/administrator/selectCourse/SelectCourse";
import StudentSelectCourse from "../pages/student/SelectCourse/SelectCourse";
import Plan from "../pages/student/Plan/Plan";
import ExamPlan from "../pages/student/ExamPlan/ExamPlan";
import useProfile from "../query/useProfile";
import { queryClient } from "../query/CustomQueryClient";
import BlogPage from "../pages/student/BlogPage/BlogPage";
import BlogEditor from "../pages/student/BlogPage/BlogEditor";
import BlogDetail from "../pages/student/BlogPage/BlogDetail";
import Activation from "../pages/login/Activation";
import Comment from "../pages/student/Comment/Comment";
import { PROFILE_STUDENT_URL, PROFILE_TEACHER_URL } from "../constants/url";
import Social from "../pages/student/Quality/Social";
import StudentWork from "../pages/student/Quality/StudentWork";
import Voluntary from "../pages/student/Quality/Voluntary";
import Competition from "../pages/student/Quality/Competition";
import Research from "../pages/student/Quality/Research";
import TeacherAccount from "../pages/administrator/teacherAccount/TeacherAccount";
import StudentAccount from "../pages/administrator/studentAccount/StudentAccount";
import ActivityControl from "../pages/administrator/activityControl/ActivityControl";
import TeacherCourseApplication from "../pages/teacher/CourseApplication/CourseApplication";
const DEFAULT_ROLE = -1;
const LOGIN_ROLE = 0;
const TEACHER_ROLE = 1;
const STUDENT_ROLE = 2;
const ADMIN_ROLE = 3;

const BaseRouter = () => {
  // const location = useLocation();
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Index role={DEFAULT_ROLE} />}>
          <Route path="/login" element={<Index role={LOGIN_ROLE} />}>
            <Route path="index" element={<Login />}></Route>
          </Route>
          <Route path="/teacher" element={<Index role={TEACHER_ROLE} />}>
            <Route path="index" element={<Teacher />}></Route>
            <Route path="homepage">
              <Route path="notice" element={<NoticeTeacher />}></Route>
              <Route path="setting" element={<TeacherSetting />}></Route>
              <Route path="course" element={<Course />}></Route>
              <Route
                path="courseApplication"
                element={<TeacherCourseApplication />}
              ></Route>
              <Route
                path="examApplication"
                element={<ExamApplication />}
              ></Route>
              <Route path="exam" element={<Exam />}></Route>
              <Route path="examdetail" element={<ExamDetail />}></Route>
              {/* <Route path="introduction" element={<Introduction />}></Route> */}
            </Route>
          </Route>

          <Route path="/admin" element={<Index role={ADMIN_ROLE} />}>
            <Route path="account">
              <Route path="teacher" element={<TeacherAccount />} />
              <Route path="student" element={<StudentAccount />} />
            </Route>
            <Route path="course">
              <Route path="select" element={<SelectCourse />} />
              <Route path="application" element={<CourseApplication />} />
              <Route path="exam" element={<ExamControl />} />
            </Route>
            <Route path="activity" element={<ActivityControl />} />
          </Route>

          <Route path="/student" element={<Index role={STUDENT_ROLE} />}>
            <Route path="index" element={<Student />}></Route>
            <Route path="homepage">
              <Route path="setting" element={<UserSetting />} />
              <Route path="blog" element={<BlogPage />} />
              <Route path="blogeditor/:id" element={<BlogEditor />} />
              <Route path="blogdetail/:id" element={<BlogDetail />} />
            </Route>

            <Route path="teach">
              <Route path="score" element={<ScorePage />} />
              <Route path="select" element={<StudentSelectCourse />} />

              <Route path="planning" element={<Plan />} />

              <Route path="exam" element={<ExamPlan />} />
            </Route>
            <Route path="moral">
              <Route path="research" element={<Research />}></Route>
              <Route path="race" element={<Competition />}></Route>
              <Route path="comment" element={<Comment />}></Route>
              <Route path="volunteer" element={<Voluntary />}></Route>
              <Route path="studentwork" element={<StudentWork />}></Route>
              <Route path="practice" element={<Social />}></Route>
            </Route>
          </Route>
          <Route path="/activation" element={<Activation />}></Route>
          <Route path="/introduction" element={<Introduction />}></Route>
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
};

const NotFound = () => {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/login/index");
  }, []);
};

const useUser = () => {
  const context = useContext(UserContext);
  return context;
};

export const TitleContext = createContext(0);

const Index = ({ role }) => {
  const location = useLocation();
  const navigate = useNavigate();
  const outlet = useOutlet();

  const user = useUser();
  useEffect(() => {
    if (location.pathname === "/" || (role != -1 && user.user != role)) {
      if (user.user == 0) {
        navigate("/login/index", { replace: true });
      } else if (user.user == 1) {
        navigate("/teacher/index", { replace: true });
      } else if (user.user == 2) {
        navigate("/student/index", { replace: true });
      } else if (user.user == 3) {
        //
        navigate("/admin/account/teacher", { replace: true });
      }
    }
  }, [user.user, role, location.pathname]);

  useEffect(() => {
    if (user.user == -1) {
      user.setUser(getLocalUser());
    }
    queryClient.clear();
  }, []);

  const {
    data: proInfo,
    isSuccess: proIsSuccess,
    isError: proIsError,
    isLoading: proisLoading,
    mutate: proMutate,
  } = useProfile();

  useEffect(() => {
    if (user.user == 2) {
      proMutate({ url: PROFILE_STUDENT_URL });
    }
    if (user.user == 1) {
      proMutate({ url: PROFILE_TEACHER_URL });
    }
    if (user.user == 3) {
      userproContext.setUserPro({
        name: "管理员",
        avatar:
          "http://cloud.wxyww.top/apps/sharingpath/image/folder/student/MDAxLWF2YXRhcjIwMjItMTItMjcgMDY6NDI6MjY=.png",
      });
    }
  }, [user.user]);

  const userproContext = useContext(UserProContext);
  useEffect(() => {
    if (proIsSuccess) {
      userproContext.setUserPro(proInfo.data.data);
    }
  }, [proIsSuccess]);

  const [nowTitle, setnowTitle] = useState(0);

  return (
    <div>
      {role === 1 && (
        <TitleContext.Provider value={{ nowTitle, setnowTitle }}>
          <SideBarTeacher proIsFetching={proisLoading}>
            <TransitionGroup>
              <SwitchTransition mode="out-in">
                <CSSTransition
                  key={location.pathname}
                  classNames="fade"
                  // exit={true}
                  // in={true}
                  unmountOnExit
                  timeout={300}
                >
                  {outlet}
                </CSSTransition>
              </SwitchTransition>
            </TransitionGroup>
          </SideBarTeacher>
        </TitleContext.Provider>
      )}

      {role === 2 && (
        <TitleContext.Provider value={{ nowTitle, setnowTitle }}>
          <SideBar proIsFetching={proisLoading}>
            <TransitionGroup>
              <SwitchTransition mode="out-in">
                <CSSTransition
                  key={location.pathname}
                  classNames="fade"
                  // exit={true}
                  // in={true}
                  unmountOnExit
                  timeout={300}
                >
                  {outlet}
                </CSSTransition>
              </SwitchTransition>
            </TransitionGroup>
          </SideBar>
        </TitleContext.Provider>
      )}

      {role === 3 && (
        <TitleContext.Provider value={{ nowTitle, setnowTitle }}>
          <SideBarAdmin>
            <TransitionGroup>
              <SwitchTransition mode="out-in">
                <CSSTransition
                  key={location.pathname}
                  classNames="fade"
                  // exit={true}
                  // in={true}
                  unmountOnExit
                  timeout={300}
                >
                  {outlet}
                </CSSTransition>
              </SwitchTransition>
            </TransitionGroup>
          </SideBarAdmin>
        </TitleContext.Provider>
      )}

      {role !== 2 && role !== 1 && role !== 3 && <Outlet />}
    </div>
  );
};

export default BaseRouter;
